@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/suppliermy/balance_add.css')}}">
@section('content')
<div class="mainHrContent" id="balanceAdd" v-cloak>
    <div class="payheader">
        <a href="{{route('home.index.index') }}">
            <img :src="headerLogo" alt="">
        </a>
        <div class='rightStep'>
            <div class="completed-step "><a>填写充值金额</a></div>
            <div class="completed-step active"><a>确认充值</a></div>
            <div class="completed-step "><a>充值完成</a></div>
        </div>
    </div>
    <div class="applymes">
        <span>订单信息</span>
        <table>
            <thead>
                <tr>
                    <th>
                        订单编号
                    </th>
                    <th>
                        商品名称
                    </th>
                    <th>
                        充值账号
                    </th>
                    <th>
                        支付金额
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>@{{payData.pay_sn}}</td>
                    <td>@{{payData.desc}}</td>
                    <td>@{{payData.user_name}}</td>
                    <td>￥@{{payData.money}}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="paymes">
        <span>支付信息</span>
        <div>
            <!-- <div :class="{active:checkNum==1}">
                <img src="{{URL::asset('./img/icon/checktrue.png')}}" alt="" v-if="checkNum==1">
                <img src="{{URL::asset('./img/icon/checkfalse.png')}}" alt="" v-else>
                <img src="{{URL::asset('./img/icon/zhifubao.png')}}" alt="">
            </div> -->
            <div :class="{active:checkNum==2}">
                <img src="{{URL::asset('./img/icon/checktrue.png')}}" alt="" v-if="checkNum==2">
                <img src="{{URL::asset('./img/icon/checkfalse.png')}}" alt="" v-else>
                <img src="{{URL::asset('./img/icon/weixin.png')}}" alt="">
            </div>
        </div>
    </div>
    <div class="submitOrder">
        订单支付<span>
            ￥@{{payData.money}}
        </span>
        <button @click="nextClick">
            提交订单
        </button>
    </div>
    <el-dialog :visible.sync="paying" width="400px" class="payOrderDialog" :close-on-press-escape="false" :close-on-click-modal="false">
        <span class="payOrderDialog_span">￥@{{payData.money}}</span>
        <div class="payOrderDialog_code">
            <div id="qrcode"></div>
            <span class="payOrderDialog_code_span">微信扫一扫，立即支付</span>
        </div>
    </el-dialog>
</div>
<style>
    .el-dialog__header {
        display: none;
    }

    #qrcode {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
@endsection
@section('scripts')
<script>
    $(() => {
        let balanceAdd = new Vue({
            el: '#balanceAdd',
            data: () => {
                return {
                    headerLogo: '',
                    checkNum: 2,
                    payId: getQueryString("id"),
                    payData: {},
                    paying: false,
                }
            },
            created() {
                this.headerLogo = JSON.parse(sessionStorage.getItem("overall")).site_logo
                let data = {
                    balance_id: this.payId,
                }
                apiAjax("{{ route('home.user.supplierRechargeDataApi')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.payData = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });

                    }
                }, (erro) => {

                });
            },
            mounted() {

            },
            methods: {
                nextClick() {
                    $('#qrcode').html("");
                    let data = {
                        pay_order: this.payData.pay_sn,
                    }
                    apiAjax("{{ route('home.user.supplierRecharge')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.paying = true;
                            this.$nextTick(() => {
                                var qrcode = new QRCode("qrcode", {
                                    text: res.data,
                                    width: 248,
                                    height: 248,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                                this.timePay();
                            })
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });

                        }
                    }, (erro) => {

                    });
                },
                timePay() {
                    let pay = setInterval(() => {
                        let data = {
                            balance_id: this.payId,
                        }
                        apiAjax("{{ route('home.user.supplierRechargeDataApi')}}", 'get', data, (res) => {
                            if (res.code == 0) {
                                if (res.data.pay_state == 2) {
                                    this.$message({
                                        message: "支付成功",
                                        type: 'success'
                                    });
                                    window.location.href = "{{ route('home.suppliermy.supplierBalanceAddFinish') }}";
                                    clearTimeout(pay);
                                }
                            } else {}
                        }, (erro) => {

                        });
                    }, 3000);
                }
            }
        })
    })
</script>
@endsection